<template>
  <div class="bannerout">
    <div class="bannerbox">
      <div id="focus">
        <ul>
          <li><a href=""> <img src="/images/05jpg.JPG" width="962" height="400" /></a></li>
          <li><a href=""> <img src="/images/04jpg.JPG" width="962" height="400" /></a></li>
          <li><a href=""> <img src="/images/03jpg.JPG" width="962" height="400" /> </a></li>
          <li><a href=""> <img src="/images/02jpg.JPG" width="962" height="400" /></a></li>
          <li><a href=""> <img src="/images/01jpg.jpg" width="962" height="400" /></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  script: [
    { src: '/js/jquery-1.9.1.min.js' },
    { src: '/js/simplefoucs.js' }
  ]
})
</script>

<style scoped>
.bannerout {
  BACKGROUND-POSITION: 50% top;
  BACKGROUND-IMAGE: url(/images/banner_bg.jpg);
  WIDTH: 100%;
  BACKGROUND-REPEAT: repeat-x
}

.banner_bg {
  BACKGROUND: url(/images/bannerout_bg.jpg) no-repeat center top;
  MARGIN: 0px auto;
  WIDTH: 1024px
}

.banner {
  MARGIN: 0px auto;
  WIDTH: 1000px;
  PADDING-TOP: 10px;
  HEIGHT: 345px;
  TEXT-ALIGN: center
}

.bannerout2 {
  HEIGHT: 230px
}

.bannerbox {
  MARGIN: 0px auto;
  OVERFLOW: hidden;
  WIDTH: 962px;
  HEIGHT: 400px
}

#focus {
  CLEAR: both;
  FLOAT: left;
  OVERFLOW: hidden;
  WIDTH: 962px;
  POSITION: relative;
  HEIGHT: 400px
}

#focus UL {
  CLEAR: both;
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  FLOAT: left;
  PADDING-BOTTOM: 0px;
  MARGIN: 0px;
  WIDTH: 962px;
  PADDING-TOP: 0px;
  POSITION: absolute;
  HEIGHT: 400px
}

#focus UL LI {
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  FLOAT: left;
  PADDING-BOTTOM: 0px;
  MARGIN: 0px;
  OVERFLOW: hidden;
  WIDTH: 962px;
  PADDING-TOP: 0px;
  POSITION: relative;
  HEIGHT: 400px
}

#focus .preNext {
  WIDTH: 550px;
  CURSOR: pointer;
  POSITION: absolute;
  TOP: 0px;
  HEIGHT: 400px
}

#focus .pre {
  BACKGROUND: url(/images/sprite.png) no-repeat left center;
  LEFT: 0px
}

#focus .next {
  RIGHT: 0px;
  BACKGROUND: url(/images/sprite1.png) no-repeat right center
}
</style>